import { Component, OnInit } from '@angular/core';
import { memberSelfUrl } from '../../../urlConfig';
import { HttpService } from '../../../service/httpService/http.service';
import { LocalStorageService } from '../../../service/localStorageService/local-storage.service';
import { glanceOverimageUrl, memberImgUrl } from '../../../urlConfig';
import { NzMessageService, NzNotificationService } from 'ng-zorro-antd';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators
} from '@angular/forms';
import { memberAlterUrl } from '../.././../urlConfig';
import { Router } from '@angular/router';

@Component({
  selector: 'app-personal-data',
  templateUrl: './personal-data.component.html',
  styleUrls: ['./personal-data.component.styl']
})
export class PersonalDataComponent implements OnInit {
  validateForm: FormGroup;
  memberImgUrl: string = memberImgUrl;
  constructor(
    public http: HttpService,
    public localStorage: LocalStorageService,
    private message: NzMessageService,
    private fb: FormBuilder,
    private router: Router,
    private notification: NzNotificationService
  ) {}

  name: '';
  username: '';
  sex: '';
  grade: '';
  directionId: number;
  email: '';
  qq: '';
  weChat: '';
  phoneNumber: '';
  image: '';

  imageUrl: string = glanceOverimageUrl; // 存放图片前缀地址
  expression: false;
  ngOnInit() {
    var token = this.localStorage.getItem('token');
    // 获取个人信息
    this.http.getData(`${memberSelfUrl}`).subscribe((event: any) => {
      console.log(event);
      if (event.code === 200) {
        var data = event.data;
        this.name = data.name;
        this.username = data.username;
        this.sex = data.sex;
        this.grade = data.grade;
        this.directionId = data.directionId;
        this.email = data.email;
        this.qq = data.qq;
        this.weChat = data.weChat;
        this.phoneNumber = data.phoneNumber;
        this.image = data.image;
      }
    });

    this.validateForm = this.fb.group({
      phoneNumber: [
        '',
        [Validators.required, Validators.pattern(/^1[34578]\d{9}$/)]
      ],
      email: ['', [Validators.email, Validators.required]],
      qq: ['', []],
      weChat: [
        '',
        [
          Validators.required,
          Validators.pattern(/^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/)
        ]
      ]
    });
  }

  createMessage(type: string): void {
    this.message.create(type, `暂不支持修改！`);
  }

  submitForm(): void {
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }
    if (
      this.myvalidateForm('phoneNumber') &&
      this.myvalidateForm('email') &&
      this.myvalidateForm('weChat')
    ) {
      const token = this.localStorage.getItem('token');
      this.validateForm.value.accessToken = token.accessToken;
      this.http
        .putData(memberAlterUrl, this.validateForm.value)
        .subscribe((response: any) => {
          if (response.code === 200) {
            // 获取最新个人信息
            this.http.getData(memberSelfUrl).subscribe((event: any) => {
              console.log(event);
              if (event.code === 200) {
                this.resetStyle('none');
                var data = event.data;
                this.name = data.name;
                this.username = data.username;
                this.sex = data.sex;
                this.grade = data.grade;
                this.directionId = data.directionId;
                this.email = data.email;
                this.qq = data.qq;
                this.weChat = data.weChat;
                this.phoneNumber = data.phoneNumber;
                this.DuplicateSubmission('success');
              }
            });
          }
        });
    }
  }

  myvalidateForm(formControlName) {
    return this.validateForm.get(formControlName).errors === null;
  }

  // 显示修改页面
  reset() {
    this.resetStyle('block');
  }
  // 隐藏修改页面
  cancel() {
    this.resetStyle('none');
  }

  resetStyle(display: string) {
    var element = document.getElementById('reset');
    element.style.display = display;
    element.style.animation = 'all 0.5s';
  }

  DuplicateSubmission(type: string): void {
    this.notification.create(type, '保存成功', '');
  }
}
